<template>
  <view>
    <view class="benegit">
      <view class="benegit-container" v-for="(item, index) in BenegitsList" :key="index" style="display: flex; justify-content: center;">
        <text>查看我的收益: {{item.balance}}</text>
      </view>
      <!-- 按钮弹框 -->
      <view class="ipt">
        <uni-popup :show="showPopup" ref="popup" class="white-popup">
          <view class="input-item" style="display: flex;">
            <text style="color: aliceblue;">提现金额：</text>
            <input v-model="inputValue" placeholder="请输入提现金额" class="input" />
          </view>
          <!-- 下拉选框 -->
          <view class="select-item">
            <text style="color: aliceblue; position: relative; top: 20px;">我的账户：</text>
            <view class="select">
              <uni-data-select
                class="select-i"
                :localdata="range"
                @change="change"
                v-model="selectedAccountType"
              ></uni-data-select>
            </view>
          </view>
          <view class="btn-item">
            <button @click="submit()" style="">提交</button>
          </view>
        </uni-popup>
      </view>
      <uni-button @click="open">提现</uni-button>
    </view>

    <uni-section title="提现记录" type="line">
      <uni-card title="名称" :extra="item.nickName" v-for="(item, index) in withdrawalRecordsList" :key="index">
        <view class="card-item">
          <text class="name">手机号码</text>
          <text class="content">{{ item.phoneNumber }}</text>
        </view>
        <view class="card-item">
          <text class="name">账户名称</text>
          <text class="content">{{ item.accountName }}</text>
        </view>
        <view class="card-item">
          <text class="name">账户</text>
          <text class="content">{{ item.account }}</text>
        </view>
        <view class="card-item">
          <text class="name">开户银行</text>
          <text class="content">{{ item.openingBank }}</text>
        </view>
        <view class="card-item">
          <text class="name">金额</text>
          <text>{{ item.amount }}</text>
        </view>
        <view class="card-item">
          <text class="name">银行分行</text>
          <text class="content">{{ item.bankBranch }}</text>
        </view>
        <view class="card-item">
          <text class="name">账户类型</text>
          <text class="content">{{ item.accountType === '0' ? '银行卡' : '支付宝' }}</text>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
import { Benegits, withdrawalRecords, addWithdraw, myBank, userID } from "../../../api/system/user.js";
import user from "../../../store/modules/user.js";

export default {
  data() {
    return {
      userId: "", //保存动态的userId
      BenegitsList: [], //查看我的收益
      withdrawalRecordsList: [], //查看我的缴费记录
      showPopup: false, // 控制弹窗显示的变量
      inputValue: "", // 输入框的值
      selectedAccountType: "0", // 选中的账户类型，默认为银行卡
      range: [
        { value: "0", label: "银行卡" },
        { value: "1", label: "支付宝" },
      ],
	accountList: [], // 用于保存支付宝或银行卡信息的数组
	    accountType:''	//存储类型 0支付宝1银行卡 
    };
  },
  mounted() {
    this.myBenegits(); //缴费金额
    this.myWithdraw(); //缴费记录
    this.myUser();
    this.showPopup = localStorage.getItem("showPopup") === "true"; // 读取localStorage的值
  },
  onLoad() {
    this.myBenegits();
    this.myWithdraw();
    this.myUser();
  },
  methods: {
    // 获取信息
    async myUser() {
      try {
        console.log("调用 userID");
        const userId = await userID();
        console.log("获取信息成功", userId);
        return userId;
      } catch (error) {
        console.log("获取信息失败", error);
      }
    },
    async change(item) {
		const userId = await this.myUser();
       const accountType = item.value;
		myBank(userId,accountType).then(res=>{
			console.log('判断支付类型',res);
			 res.accountType =this.accountType 
		})
     //   this.selectedAccountType = accountType;
     
     //   const returnedAccountType = await this.myBank(userId, accountType); // 调用myBank() 并获取返回的 returnedAccountType 值
     //   this.returnedAccountType = returnedAccountType;
     
     //   console.log("判断支付类型", returnedAccountType === "0" ? "银行卡" : "支付宝");
    },
    // async myBank(userId, accountType) {
    //   try {
    //      const res = await myBank(userId, accountType);
    //      console.log("判断支付类型", res);
    //      const returnedAccountType = res.accountType;
     
    //      return returnedAccountType; // 返回 returnedAccountType 值
    //    } catch (error) {
    //      console.log("获取银行信息失败", error);
    //      return null; // 返回 null 或其他适当的错误值，表示获取银行信息失败
    //    }
    // },
    // 点击提现（包括金额，方式）
    async submit() {
      const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
      const amount = this.inputValue;
      const accountType = this.selectedAccountType;

      addWithdraw(amount, accountType, userId).then((res) => {
        console.log("提现成功", res);
        this.myBenegits();
      });
    },
    async myBenegits() {
      const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
      Benegits(userId).then((res) => {
        console.log("查看我的收益成功", res);
        this.BenegitsList = res;
      });
    },
    async myWithdraw() {
      const userId = await this.myUser(); // 使用 await 等待 myUser() 返回的结果
      withdrawalRecords(userId).then((res) => {
        console.log("提现记录成功", res);
        this.withdrawalRecordsList = res;
      });
    },
    open() {
      this.$refs.popup.open();
      this.showPopup = true; // 更新showPopup的值为true，显示弹窗
      localStorage.setItem("showPopup", true);
    },
  },
};
</script>

<style lang="scss">
	.benegit{
		width: 100%;
		height: 200px;
		background-color: rgba(0, 0, 225,.5);
		// display: flex;
		// align-items: center;
		// justify-content: center;
		
		.benegit-container{
			flex-wrap: wrap;
			text{
				color: #fff;
				font-size: 16px;
			}
			.btn{
				width: 100px;
				height: 30px;
				display: flex;
				justify-content: center;
			}
		}
	}
	uni-button{
		// position: absolute;
		width: 100px;
		height: 40px;
		display: block;
		
	}
	.card-item{
		display: flex;
		justify-content: space-between;
	}
	.ipt .uni-popup {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background-color: #fff;
	  width: 300px;
	  height: 300px;
	  padding: 10px;
	}
	.white-popup{
		.input-item{
			display: flex;
			position: fixed;
			top: 30px;
			left: 10px;
			right: 20px;
			.input{
				padding: 5px 2px;
				background-color: #fff;
			}
		}
		.select-item{
				position: fixed;
				top: 60px;
				left: 10px;
				.select{
					display: flex;
					position: absolute;
					left: 60px;
					width: 100px;
					height: 30px;
					.select-i{
						margin-left: 10px;
						background-color: #fff;
					}
				}
		}
		.btn-item{
			position: fixed;
			bottom: 20px;
			right: 15px;
			.btn1{
				position: absolute;
				width: 40px;
				height: 30px;
			}
		}
	}
	.select-item{
		.select{
			width: 300px;
			position: relative;
			.select-i{
				// position: absolute;
				
			}
		}
	}
	uni-checkbox-group{
		display: inline;
	}
	uni-select{
		position: relative;
		left: 200px;
		background-color: #fff;
	}
</style>
